<template>
    <div class="register-container">
        <div class="register-wrap">
            <div class="logo-wrap">
                <van-image 
                    class="logo-image"
                    round
                    :src="logo" 
                    fit="contain" 
                />
                <span class="title">E点点</span>
            </div>

            <van-form @submit="onSubmit" @failed="onFailed" :show-error="false">
                <div class="telephone">
                    <van-field
                        class="loginInput"
                        name="telephone"
                        v-model="user.telephone"
                        placeholder="输入手机号"
                        :rules="[{pattern: telePattern, message: '手机号码不合法' }]"
                    >
                        <van-icon class="iconfont" class-prefix="icon" slot="left-icon" name="shoujihao"></van-icon>
                    </van-field>
                </div>

                <!-- 验证码登录 -->
                <div class="verifyCode">
                    <!-- 左部是普通的输入框 -->
                    <div class="codeWrap">
                        <van-field
                        class="loginInput"
                        name="verifyCode"
                        v-model="user.verifyCode"
                        placeholder="输入验证码"
                    >
                        <van-icon class="iconfont" class-prefix="icon" slot="left-icon" name="shoujihao"></van-icon>
                    </van-field>
                    </div>
                    <!-- 右部按钮获取验证码 -->
                    <div class="codeBtnWrap">
                        <van-button class="code-button" color="rgb(247,147,30)"><span class="codeBtn">获取验证码</span></van-button>
                    </div>
                </div>

                <div class="password">
                    <van-field
                        class="loginInput"
                        name="password"
                        type="password"
                        v-model="user.password"
                        placeholder="输入密码"
                        :rules="[{pattern: passwordPattern, message: '密码必须以字母开头，长度在6~18之间，只能包含字母、数字和下划线' }]"
                    >
                    <van-icon class="iconfont" class-prefix="icon" slot="left-icon" name="mima"></van-icon>
                    </van-field>
                </div>

                <div class="password">
                    <van-field
                        class="loginInput"
                        name="passwordSure"
                        type="password"
                        v-model="user.passwordSure"
                        placeholder="确认密码"
                        :rules="[{pattern: passwordPattern, message: '密码必须以字母开头，长度在6~18之间，只能包含字母、数字和下划线' }]"
                    >
                    <van-icon class="iconfont" class-prefix="icon" slot="left-icon" name="mima"></van-icon>
                    </van-field>
                </div>
                
                <div class="login">
                    <span class="loginBtn" @click="toLogin">已有账号？返回登录</span>
                </div>

                <div class="submit">
                    <van-button class="subBtn" round color="rgb(247,147,30)" native-type="submit"><span class="sub">注册</span></van-button>
                </div>
            </van-form>

        </div>
    </div>
</template>

<script>
import { register } from '@/api/user'

export default {
    name: 'Register',

    data() {
        return {
            logo:require('@/assets/images/Ediandian.png'),
            user:{
                telephone:'',
                password:'',
                passwordSure:'',
                verifyCode:''
            },
            telePattern:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            passwordPattern:/^[a-zA-Z]\w{5,17}$/
        
        };
    },

    mounted() {
        
    },

    methods: {
        /**
         * 注册表单校验无误后开始向后端发送注册用户请求
         */
        onSubmit() {
            
            if(this.user.password != this.user.passwordSure){ 
                this.$dialog({ 
                    title:'提示',
                    message:'两次密码不一致'
                })

                return ;
            }
            

            let user = { 
                telephone:this.user.telephone,
                password:this.user.password
            }
            this.$toast.loading({
                message:'注册中...',
                forbidClick: true,
            });
            register(user).then(res => {
                console.log("res = ",res)
                if(res.data.msg == "注册成功"){ 
                    this.$toast.success('注册成功,返回登录')
                    setTimeout(() => {
                        this.$router.push({ 
                            name:'login'
                        })
                    }, 2000);
                } else if(res.data.msg == "注册失败"){ 
                    this.$toast.fail('注册失败, 请重试')
                }
            }).catch(err => { 
                let status = err.response.status
                if(status === 400){ 
                    this.$toast.fail("手机号码已被注册")
                    Object.keys(this.user).forEach(key => { this.user[key] = '' })
                }
            }) 
        },

        /**
         * 表单正则校验失败处理
         */
        onFailed(err) {
            if(err.errors[0]){ 
                let errMsg = err.errors[0].message
                this.$dialog.alert({ 
                    title:'提示',
                    message:errMsg
                })
            }
            
        },
        /**
         * 返回登录
         */
        toLogin() { 
            this.$router.push({ 
                name:'login'
            })
        }
    },
};
</script>

<style scoped>
.register-container{ 
    width: 100%;
    height: 100%;
    display: flex;
    background-image: url('~@/assets/images/loginBack.png');
    background-size: cover;
    background-repeat: no-repeat;
}

.register-wrap{ 
    width: 350px;
    height: 390px;
    margin: 75px auto;
}

/**logo区 */
.logo-wrap{ 
    width: 120px;
    height: 150px;
    margin: auto;
}

.logo-wrap .title {
    display: block; 
    width: 100px;
    font-size: 24px;
    color: #ffffff;
    text-align: center;
    padding-left: 20px;
    letter-spacing: 5px;
}

/**logo图片 */
.logo-wrap .logo-image { 
    width: 120px;
    height: 120px;
}

.verifyCode{ 
    width: 300px;
    height: 40px;
    margin: 30px auto;
    border-radius: 40px;
    overflow: hidden;
    display: flex;flex-direction: row;
}

.verifyCode .codeWrap{ 
    flex: 2;
}

.verifyCode .codeBtnWrap{ 
    flex: 1;
}

.verifyCode .codeBtnWrap .code-button .codeBtn { 
    font-size: 11px;
}

.verifyCode .codeBtnWrap .code-button { 
    width: 100%;
}

.telephone,.password{ 
    width: 300px;
    height: 40px;
    margin: 30px auto;
    border-radius: 40px;
    overflow: hidden;
}

.password { 
    margin-bottom: 10px;
}

.loginInput{ 
    background-color: rgba(255,255,255,.4) !important;
}

.login{ 
    width: 300px;
    margin: auto;
}

.loginBtn{ 
    display: block;
    width: 100%;
    color: rgb(251,176,59);
    font-size: 15px;
    text-align: right;
    cursor: pointer;
}

.submit { 
    width: 100px;
    height: 30px;
    margin: 30px auto;
}

.subBtn{ 
    width: inherit;
}

.sub{ 
    font-size: 18px;
    letter-spacing: 5px;
}
</style>